<template>
  <div ref="tree"
       class="charts chart-tree"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
    name: 'ChartBar',
    data () {
        return {
            chart_dom: ''
        }
    },
    props: {
        data: Array
    },
    mounted () {
        this.chart_dom = echarts.init(this.$refs.tree, 'tdTheme')
        this.chart_dom.showLoading()
        this.init()
    },
    computed: {
        seriesData () {
            let root = { name: '对象', children: [] }
            this.data.forEach((item, index) => {
                let parent = { children: [] }
                if (index === 0) {
                    parent.collapsed = false
                } else {
                    parent.collapsed = true
                }
                parent.name = item.objectName
                parent.index = index
                root.children.push(parent)
                let propertyList = item.propertyList
                if (propertyList.length > 0) {
                    propertyList.forEach(item => {
                        parent.children.push({
                            name: item
                        })
                    })
                }
            })
            return root
        }
    },
    methods: {
        init () {
            this.chart_dom.hideLoading()
            let option = {
                // 标题
                title: {
                    text: '对象关联属性统计',
                    x: 'center',
                    padding: 15,
                    textStyle: {
                        color: '#28478d'
                    }
                },
                // 图表背景颜色
                backgroundColor: '#f0f0f0',
                // 鼠标悬浮提示
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                // 系列
                series: [
                    {
                        type: 'tree',
                        zlevel: 2,
                        data: [this.seriesData],
                        top: 36,
                        left: '7%',
                        bottom: '1%',
                        right: '20%',
                        roam: true,
                        symbolSize: 7,
                        // initialTreeDepth: 1,
                        itemStyle: {
                            // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{
                                    offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        },
                        label: {
                            normal: {
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 9
                            }
                        },

                        leaves: {
                            label: {
                                normal: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            }
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            }

            this.chart_dom.setOption(option)

            this.chart_dom.on('click', 'series.tree', (param) => {
                let option = this.chart_dom.getOption()
                let data = option.series[0].data[0].children
                option.series[0].data[0].children = data.map(item => {
                    if (item.index === param.data.index) {
                        item.collapsed = false
                    } else {
                        item.collapsed = true
                    }
                    return item
                })
                this.chart_dom.setOption(option)
            })
        },
        resize () {
            this.$nextTick(() => {
                this.chart_dom.resize()
            })
        }
    }
}
</script>

<style lang="less">
.chart-tree {
	height: 100%;
}
</style>
